<template>
  <el-main>
    <el-card shadow="never">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础设置" name="first">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="是否开启">
              <el-switch
                v-model="form.new_user_buy_open"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
            <el-form-item label="关联的盲盒ID">
              <el-input
                v-model="form.must_blindbox_id"
                style="width: 500px"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="首抽价格">
              <el-input
                v-model="form.first_amount"
                style="width: 500px"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="限购次数">
              <el-input
                v-model="form.buy_num_limit"
                style="width: 500px"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="起购数量">
              <el-input
                v-model="form.start_buy_num"
                style="width: 500px"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="下单记录" name="second">
          <div class="search-box">
            <el-form
              :inline="true"
              :model="logForm"
              class="demo-form-inline"
              label-width="80px"
            >
              <el-form-item label="下单人ID">
                <el-input
                  v-model="logForm.user_id"
                  placeholder=""
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="下单时间">
                <el-date-picker
                  v-model="logForm.time"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  icon="el-icon-search"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div
            style="
              width: 100%;
              height: 0;
              border-bottom: #e4e7ed 1px dashed;
              margin-bottom: 10px;
            "
          ></div>
          <el-table :data="tableData" style="width: 100%; margin-top: 20px">
            <el-table-column prop="detail.id" label="ID" width="80px" />
            <el-table-column
              prop="detail.order_no"
              label="订单号"
              width="200px"
            />
            <el-table-column
              prop="detail.pay_order_no"
              label="支付单号"
              width="200px"
            />
            <el-table-column prop="detail.user_id" label="支付人id" />
            <el-table-column prop="detail.user_name" label="支付人名" />
            <el-table-column prop="detail.total_num" label="购买数量" />
            <el-table-column label="支付方式">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.detail.pay_way === 1"
                  >微信</el-tag
                >
                <el-tag type="info" v-if="scope.row.detail.pay_way === 2"
                  >支付宝</el-tag
                >
                <el-tag type="warning" v-if="scope.row.detail.pay_way === 3"
                  >哈希币</el-tag
                >
                <el-tag type="danger" v-if="scope.row.detail.pay_way === 4"
                  >余额</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="支付状态">
              <template #default="scope">
                <el-tag type="warning" v-if="scope.row.detail.pay_status === 1"
                  >待支付</el-tag
                >
                <el-tag type="success" v-if="scope.row.detail.pay_status === 2"
                  >已支付</el-tag
                >
                <el-tag type="danger" v-if="scope.row.detail.pay_status === 3"
                  >已退款</el-tag
                >
                <el-tag type="info" v-if="scope.row.detail.pay_status === 4"
                  >部分退款</el-tag
                >
                <el-tag type="success" v-if="scope.row.detail.pay_status === 5"
                  >部分支付</el-tag
                >
                <el-tag type="error" v-if="scope.row.detail.pay_status === 6"
                  >支付异常</el-tag
                >
                <el-tag type="danger" v-if="scope.row.detail.pay_status === 7"
                  >支付超时</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="detail.pay_price" label="支付金额" />
            <el-table-column prop="create_time" label="下单时间" width="200" />
          </el-table>
          <div style="margin-top: 20px"></div>
          <el-pagination
            background
            layout="->, prev, pager, next"
            :total="total"
            :page-size="logForm.limit"
            @current-change="pageChange"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      form: {
        new_user_buy_open: 1,
        first_amount: 0.01,
        buy_num_limit: 1,
        start_buy_num: 3,
        must_blindbox_id: 3,
      },
      logForm: {
        user_id: "",
        time: [],
        page: 1,
        limit: 15,
      },
      total: 0,
      tableData: [],
    };
  },
  watch: {
    activeName: {
      handler(val) {
        this.activeName = val;
        if (this.activeName == "first") {
          this.getInfo();
        } else {
          this.getOrderList();
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 获取基础配置
    async getInfo() {
      let res = await this.$API.newer.info.get();
      this.form = res.data;
      this.form.new_user_buy_open = parseInt(res.data.new_user_buy_open);
    },
    // 获取下单记录
    async getOrderList() {
      let res = await this.$API.newer.mustBuyOrderList.get(this.logForm);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    // 立即表存
    async onSubmit() {
      let res = await this.$API.newer.saveConfig.post(this.form);
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 翻页
    pageChange(val) {
      this.logForm.page = val;
      this.getOrderList();
    },
  },
};
</script>
